<template>
	<!-- 头部居顶 -->
	<view class="fixed-layout">
		<!-- 排序标签 -->
		<view class="list-sort-bar posts-sort">
			<button class="sort-button selected">雪茄详情</button>
			<button class="sort-button">用户评论</button>
			<button class="sort-button">品鉴帖子</button>
		</view>
	</view>
	<view class="content">
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block half"></view>
		<!-- 头部居顶 -->
		<view class="fixed-layout content-comment sub-bar">
			<!-- 排序标签 -->
			<view class="comment-head">
				<text class="comment-title">所有帖子</text>
				<view class="comment-sort">
					<button class="sort-button selected">热门</button>
					<button class="sort-button">最新评论</button>
					<button class="sort-button">最新发布</button>
				</view>
			</view>
		</view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block half"></view>

		<!-- 帖子列表 -->
		<view class="post-card-list">
			<!-- 帖子 -->
			<view class="post-card">
				<!-- 贴标签 -->
				<view class="post-tag-list">
					<!-- 此处仅仅是演示，极限情况不会超过4个 -->
					<icon type="" class="imgTag post-tag tag-same-city"></icon>
					<icon type="" class="imgTag post-tag tag-hold-top"></icon>
					<icon type="" class="imgTag post-tag tag-recommend"></icon>
					<icon type="" class="imgTag post-tag tag-marrow"></icon>
					<icon type="" class="imgTag post-tag tag-excellent"></icon>
					<icon type="" class="imgTag post-tag tag-beginner"></icon>
				</view>
				<!-- 用户信息 -->
				<view class="account-info post-card-account-info vip">
					<!-- 用户头像 -->
					<view class="account-head">
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
						<icon type="" class="account-hat hat-appreciation"></icon>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 男性 -->
							<icon type="" class="imgIcon icon-male"></icon>
							<!-- 女性 -->
							<!-- <icon type="" class="imgIcon icon-female"></icon> -->
						</view>
						<!-- 附加信息 -->
						<view class="plus-info">
							<!-- VIP铭牌 -->
							<text class="account-nameplate">22</text>
							<!-- SVIP铭牌 -->
							<!-- <text class="account-nameplate">22</text> -->
							<!-- 店铺 -->
							<icon type="" class="imgIcon icon-store"></icon>
							<!-- 品牌 -->
							<icon type="" class="imgIcon icon-brand"></icon>
							<!-- 认证 -->
							<icon type="" class="imgIcon icon-tobacco"></icon>
							<!-- 鉴赏家 -->
							<icon type="" class="imgIcon icon-evaluation"></icon>
						</view>
						<!-- 时间 -->
						<view class="time-info">
							<text>2019-11-12 10:21:10</text>
						</view>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 帖子菜单 -->
						<icon type="" @click="" class="fontIcon icon-more"></icon>
						<!-- 关注 -->
						<button @click="testReq" class="small-btn btn-focus-small selected">取消关注</button>
						<!-- 打赏 -->
						<!-- <button @click="testReq" class="small-btn btn-reward ">打赏</button> -->
					</view>
				</view>

				<!-- 帖子内容 -->
				<view class="post-content">
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，
					<icon type="" class="imgIcon icon-store" />依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<image @click="testReq" src="../../static/temp-photo.webp" mode="widthFix" class="full-img"></image>
					<image @click="testReq" src="../../static/temp-photo-02.png" mode="widthFix" class="full-img"></image>
					<view class="img-grid nine">
						<image @click="testReq" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<image @click="testReq" src="../../static/temp-photo-02.png" mode="widthFix"></image>
						<image @click="testReq" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<image @click="testReq" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<image @click="testReq" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<image @click="testReq" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<image @click="testReq" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<image @click="testReq" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<image @click="testReq" src=" " mode="widthFix"></image>
					</view>

					<view class="video-content">
						<!-- <video id="myVideo" src=" " @error="videoErrorCallback" controls="false"></video> -->
					</view>
					<!-- 五星 -->
					<view class="five-star">
						<uni-rate v-model="value" :value="3.5" @change="onChange" allow-half />3.5
					</view>
					<!-- 文章 -->
					<view class="article-banner" @click="testReq">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<text class="article-title">文章标题显示</text>
					</view>
					<!-- 味道标签 -->
					<view class="smell-list">
						<text class="smell-tag">威士忌</text>
						<text class="smell-tag">奶油味</text>
						<text class="smell-tag">花生</text>
						<text @click="testReq" class="link-text">去补充味道 &gt;&gt;</text>
					</view>
					<!-- 嵌入内容 -->
					<view class="iframe-content">
						<iframe
							src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe>
					</view>
					<!-- 引用卡片 -->
					<view class="quote-card" @click="testReq">
						<!-- 预览图,去掉后，剩余内容自动充满 -->
						<view class="preview-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!-- 引用内容 -->
						<view class="quote-content">
							<!-- 雪茄英文名 -->
							<text class="cigar-en-name">Ramon Allones Specially Selected</text>
							<!-- 雪茄中文名 -->
							<text class="cigar-cn-name">莱蒙特选</text>
							<!-- 间隔线 -->
							<view class="spacing-line"></view>
							<!-- 五星 -->
							<view class="five-star">
								<uni-rate size="16" :touchable="false" :value="3.5" allow-half :readonly="true" />3.5
							</view>
							<!-- 引用数据 -->
							<view class="quote-content-detail quote-cigar-content-detail">
								<view>
									<text>发布年份：</text>
									<text>2001</text>
								</view>
								<view>
									<text>发布地区：</text>
									<text>中国四川石方中国四川石方</text>
								</view>
							</view>
							<!-- 引用活动标题 -->
							<text class="quote-content-title">七夕活动·二</text>
							<!-- 内容简介，文章、帖子、评价等文字内容的简介 -->
							<text class="quote-content-summary"><text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，依赖
								display属性 + position属性 + float属性。</text>
							<!-- 通用类型数据 -->
							<view class="quote-content-detail">
								<!-- 活动热度 -->
								<text class="activity-heat">113344</text>
							</view>
							<!-- 活动内容 -->
							<view class="quote-content-detail">
								<!-- 活动时间 -->
								<text class="time-info">活动时间：2021-9-24 到 2021-10-06</text>
							</view>
						</view>
					</view>
					<!-- 引用卡-帖子引用 -->
					<view class="quote-card">
						<!-- 帖子 -->
						<view class="quote-posts">
							<view class="writer-info">
								<view class="account-head">
									<!-- 头像图片容器 -->
									<view class="account-head-img">
										<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
									</view>
								</view>
								<!-- 作者信息 -->
								<view class="account-info-content">
									<!-- 基础信息 -->
									<view class="base-info">
										<text class="account-nickName">用户名甲乙丙丁戊己</text>
									</view>
									<!-- 时间 -->
									<view class="time-info">
										<text>2019-11-12 10:21:10</text>
									</view>
								</view>
							</view>
							<view class="post-desc">
								雪茄（英文：Cigar）是一种烟草制品，由干燥及经过发酵的烟草卷制而成，吸食时把其中一端点燃，然后在另一端用口吸咄，产生烟雾。
								雪茄的烟草的主要生产国是巴西、喀麦隆、古巴、多米尼加共和国、洪都拉斯、印尼、墨西哥、尼加拉瓜和美国以及中国、东南亚。
							</view>
						</view>
					</view>
					<view class="vote">
						<text class="vote-desc">大家觉得哪一个版本更好看一些？没有第3个版本了，就这两个。</text>
						<view class="vote-bar" @click="testReq">
							<view class="bar-bg">
								<view class="bar" style="width:calc( 300/300 * 100% );"></view>
								<view class="bar-info">
									<text class="vote-item-info">第一个版本</text>
									<text class="vote-item-number">300</text>
								</view>
							</view>
							<icon type="" class="fontIcon icon-select icon-select-selected"></icon>
						</view>
						<view class="vote-bar" @click="testReq">
							<view class="bar-bg">
								<view class="bar" style="width:calc( 17/300 * 100% );"></view>
								<view class="bar-info">
									<text class="vote-item-info">第二个版本</text>
									<text class="vote-item-number">17</text>
								</view>
							</view>
							<icon type="" class="fontIcon icon-unselect"></icon>
						</view>
						<view class="vote-info">
							<text class="people-number">参加人数：562</text>
							<text class="state">已结束</text>
							<text class="creater" @click="testReq"><span class=" quote-text">@小莫</span>创建</text>
						</view>
					</view>
				</view>
				<text class="content-address">中国北京西长安街13号</text>
				<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text>
				<view class="post-bottom-bar">
					<button class="post-share-btn" @click="testReq">转发</button>
					<button class="post-comment-btn" @click="testReq">评论</button>
					<button class="post-thumbs-btn" @click="testReq">点赞</button>
				</view>
			</view>
		</view>

		<!-- 评论区 -->
		<view class="content-comment">

			<!-- 评论列表 -->
			<view class="comment-list">
				<view class="content-empty empty-comment-bg">
					评论空空，期待你的留言
				</view>
				<!-- 列表项目 -->
				<view class="comment-list-item">
					<!-- 用户信息 -->
					<view class="account-info vip">
						<!-- 用户头像 -->
						<view class="account-head">
							<!-- 头像图片容器 -->
							<view class="account-head-img">
								<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
							</view>
							<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
							<icon type="" class="account-hat hat-appreciation"></icon>
						</view>
						<!-- 文字和图标信息 -->
						<view class="account-info-content">
							<!-- 基础信息 -->
							<view class="base-info">
								<text class="account-nickName">用户名甲乙丙丁戊己</text>
								<text class="writer-sign">作者</text>
								<view class="account-level"><text>999</text></view>
								<!-- 男性 -->
								<icon type="" class="imgIcon icon-male"></icon>
								<!-- 女性 -->
								<icon type="" class="imgIcon icon-female"></icon>
							</view>
							<!-- 附加信息 -->
							<view class="plus-info">
								<!-- VIP铭牌 -->
								<text class="account-nameplate">22</text>
								<!-- SVIP铭牌 -->
								<!-- <text class="account-nameplate">22</text> -->
								<!-- 店铺 -->
								<icon type="" class="imgIcon icon-store"></icon>
								<!-- 品牌 -->
								<icon type="" class="imgIcon icon-brand"></icon>
								<!-- 认证 -->
								<icon type="" class="imgIcon icon-tobacco"></icon>
								<!-- 鉴赏家 -->
								<icon type="" class="imgIcon icon-evaluation"></icon>
							</view>
							<!-- 时间 -->
							<view class="time-info">
								<text>2019-11-12 10:21:10</text>
							</view>
						</view>
						<!-- 功能 -->
						<view class="post-head-actions">
							<!-- 帖子点赞 -->
							<!-- 自己已经点赞过就加样式thumbs-selected，如果取消点赞，就去掉这个样式 -->
							<!-- 没有人点赞过数字为空就可以 -->
							<!-- 数字位数不能超过3个，如果超过，显示+ -->
							<view class="wrap-thumbs thumbs-selected">
								<icon type="" class="fontIcon icon-thumbs"></icon>
								<text class="like-number">999+</text>
							</view>
						</view>
					</view>
					<!-- 评论内容 -->
					<view class="comment-item-content">
						<text>店里环境非常好，唱歌气氛非常嗨，极力推荐啊！！！</text>
						<view class="img-grid tetrad">
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<button class="comment-item-more">还有2条回复 &gt;</button>
					</view>
				</view>
			</view>
			<view class="noMore-content">
				- 没有个更多评论了 -
			</view>
		</view>

		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 底栏 -->
		<view class="footBar foot-common-content">
			<view class="commentBar">
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-comment"></icon>
					<text>1.2W</text>
				</view>
				<input class="footBar-input" focus placeholder="友善的发言更受欢迎～" />
				<view class="commentBar-btn btn-selected">
					<icon type="" class="fontIcon icon-rate"></icon>
					<text>5</text>
				</view>
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-collect"></icon>
					<text>收藏</text>
				</view>
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-share"></icon>
					<text>分享</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
export default {
	data() {
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500
		}
	},
	methods: {
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay
		},
		intervalChange(e) {
			this.interval = e.target.value
		},
		durationChange(e) {
			this.duration = e.target.value
		}
	}
}
</script>
